<template>
  <div>
    <card class="list-card-container">
      <t-row justify="space-between">
        <div class="left-operation-container">
          <t-form :data="formData" labelWidth="70px" :rules="rules" :colon="true" :requiredMark="false" :showErrorMessage="true" ref="form" layout="inline"  scrollToFirstError="smooth">
            <t-form-item label="日期" name="time">
               <t-date-picker v-model="formData.time" theme="primary" mode="date" clearable></t-date-picker>
            </t-form-item>
            <t-form-item label="编号" help="请输入编号" name="Serial">
              <t-input v-model="formData.Serial" placeholder="商品编号" clearable>
                <template #suffix-icon>
                  <search-icon size="20px" />
                </template>
              </t-input>
            </t-form-item>
            <t-form-item label="分类" name="classification">
               <t-select v-model="formData.classification" :options="options1" placeholder="请选择商品分类" />
            </t-form-item>
            <t-form-item label="商品类别" name="category">
               <t-select v-model="formData.category" :options="options1" placeholder="请选择商品分类" />
            </t-form-item>
          </t-form>
        </div>
        <div>
            <t-button @click="onSubmit"> 搜索 </t-button>
            <!-- :disabled="!selectedRowKeys.length" -->
            <t-button variant="base" theme="default" class="reset" @click="onReset"> 重置 </t-button>
             <!-- <t-button variant="base" theme="danger" class="reset" @click="deletelistall"> 删除 </t-button> -->
            <span v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</span>
        </div>
      </t-row>
    </card>
    <card>
        <div class="addemployees">
        <!-- 数据展示 -->
            <t-tag class="data" theme="primary" variant="light">
                总金额: 
                <span>3000000 / 元</span>
            </t-tag>
            <t-tag class="data" theme="primary" variant="light">
                总成本: 
                <span>3000 / 元</span>
            </t-tag>
            <t-tag class="data" theme="primary" variant="light">
                净利润: 
                <span>3000000 / 元</span>
            </t-tag>
        </div>

       <!-- table列表 -->
      <div class="table-container">
        <t-table
          :columns="columns"
          :data="data"
          :rowKey="rowKey"
          :verticalAlign="verticalAlign"
          :hover="hover"
          :pagination="pagination"
          :selected-row-keys="selectedRowKeys"
          :loading="dataLoading"
          @page-change="rehandlePageChange"
          @change="rehandleChange"
          @select-change="rehandleSelectChange"
        >
          <template #status="{ row }">
            <t-tag  theme="warning" variant="light">{{ row.status + ' / 元' }}</t-tag>
          </template>
          <!-- <template #goobsnumber="{ row }">
            <p>{{ row.goobsnumber }}</p>
          </template> -->
          <template #goobsrent="{ row }">
            <t-tag  theme="primary" variant="light">{{ row.goobsrent + ' / 元' }}</t-tag>
          </template>
          
          <template #goobsnumber="{ row }">
            <t-tag class="goobsnumber"  theme="success" variant="light">{{ row.goobsnumber }}</t-tag>
          </template>

          <template #op="slotProps">
              <!-- <t-button @click="handleClickDetail(slotProps)">详情</t-button> -->
              <t-button @click="editmutn(slotProps)">修改</t-button>
              <t-button theme="danger" @click="handleClickDelete(slotProps)">删除</t-button>
          </template>
        </t-table>
      </div>
    </card>
    <t-dialog
      header="确认删除当前所选员工吗？"
      :body="confirmBody"
      :visible.sync="confirmVisible"
      @confirm="onConfirmDelete"
      :onCancel="onCancel"
    >
    </t-dialog>
    <!-- <Editlease ref="Editlease"/> -->
    <!-- <Addlease ref="Addlease"/> -->
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { SearchIcon } from 'tdesign-icons-vue';
import Trend from '@/components/trend/index.vue';
import Card from '@/components/card/index.vue'; // 导入卡片
// import Addlease from './addlease.vue'; // 导入新增弹框
// import Editlease from './editlease.vue'; // 导入修改弹框
import { prefix } from '@/config/global';
import { CONTRACT_STATUS, CONTRACT_STATUS_OPTIONS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
import { Icon } from 'tdesign-icons-vue'; // 导入icon

const INITIAL_DATA = {
  time: new Date(), // 日期
  Serial: '', // 编号
  classification: '', // 分类
  category: '', // 类别
};

export default Vue.extend({
  name: 'list-base',
  components: {
    SearchIcon,
    Trend,
    Card,
    Icon,
    // Editlease,
    // Addlease
  },
  data() {
    return {
      formData: { ...INITIAL_DATA }, // form表单验证
      rules: {
        // 表单校验
      },
      options1: [
        { label: '架构云', value: '1' },
        { label: '大数据', value: '2' },
        { label: '区块链', value: '3' },
        // { label: '物联网', value: '4', disabled: true },
        { label: '人工智能', value: '5' },
      ],
      details: {}, // 详情数据
    //   // 支付路径下拉数据
    //   Paypath:[
    //     { label: '微信', value: '1' },
    //     { label: '支付宝', value: '2' },
    //     { label: '银联', value: '3' },
    //     { label: '现金', value: '4' },
    //   ],
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [], // 列表数据
      selectedRowKeys: [],  // 列表页默认选中
      value: 'frist',
      columns: [
        { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
        {
          title: '商品编号',
          align: 'left',
          width: 200,
          colKey: 'no',
          fixed: 'left',
        },
        { title: '商品名', colKey: 'name', width: 200, cell: { col: 'status' } },
        {
          title: '原价(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'goobsclassification',
        },
        {
          title: '会员价(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'goobsrent',
        },
        {
          title: '成本价(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'status',
        },
        {
          title: '原价利润(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'status',
        },
        {
          title: '会员利润(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'status',
        },
        {
          title: '售出量(大/中/小)',
          width: 200,
          ellipsis: true,
          colKey: 'goobsnumber',
        },
      ],
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      hover: true,
      rowClassName: (rowKey: string) => `${rowKey}-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 20,
        total: 0,
        defaultCurrent: 1,
      },
      searchValue: '',
      confirmVisible: false,
      deleteIdx: -1,
    };
  },
  computed: {
    confirmBody() {
      if (this.deleteIdx > -1) {
        console.log(this.data?.[this.deleteIdx]);
        
        const { name } = this.data?.[this.deleteIdx];
        return `删除后，${name}的员工信息将被清空，且无法恢复`;
      }
      return '';
    },
  },
  mounted() {
    this.datalist()
  },
  methods: {
      // 新增员工弹框确定
      ConfirmAnother () {
          this.datalist();
      },

      // 新增商品
      addemployees () {
          this.$refs.Addlease.visible = true;
      },

    // 多选删除
    deletelistall () {
      // console.log( this.selectedRowKeys , 'this.selectedRowKeys' ); // 选中的下标
      for (let index = 0; index < this.selectedRowKeys.length ; index++) {
        this.data.splice(this.selectedRowKeys[index]-1, 1);
        console.log(this.selectedRowKeys[index]-1);
      }
      this.selectedRowKeys = []
    },
    // form表单重置
    onReset() {
      this.$refs.form.reset();
      this.formData.time = new Date()
      this.$message.success('重置成功');
      // this.formData = {
      //     search: '', // 搜索
      //     states: '', // 订单状态
      //     Paypath: '', //支付路径
      //     orders: '', // 订单分类
      //     payment: '', // 付款方式
      // };
    },

    // 表单提交发送请求
    onSubmit({ validateResult, firstError }) {
      // if (validateResult === true) {
      //   this.$message.success('提交成功');
      // } else {
      //   console.log('Errors: ', validateResult);
      //   this.$message.warning(firstError);
      // }
      this.datalist()
      this.$message.success('搜索成功')
    },

    // 获取数据详情
    datalist () {
      this.dataLoading = true;
    this.$request.get('/api/lease').then((res) => {
       console.log(res);
       if (res.data.code == 200) {
           this.data = res.data.data.list
           this.pagination.total =res.data.data.list.length
       }
      })
      .catch((e: Error) => {
        console.log(e);
      })
      .finally(() => {
        this.dataLoading = false;
      });
    },

    handleClear() {
      this.$refs.form.clearValidate();
    },

    // 清除指定字段的校验结果
    // clearFieldsValidateResult() {
    //   this.$refs.form.clearValidate(['email', 'course', 'content.url']);
    //   this.$message.success('已清除邮箱、课程、个人网站等字段校验结果');
    // },

    rehandlePageChange(curr, pageInfo) {
      console.log('分页变化', curr, pageInfo);
    },

    // 退款
    refund (row) {
      // 发送请求
      this.$message.success('退款成功')
    },

    // 驳回退款
    rejectrefund (row) {
      // 发送请求
      this.$message.success('驳回退款成功')
    },

    rehandleSelectChange(selectedRowKeys: number[]) {
      // console.log(selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },

    rehandleChange(changeParams, triggerAndData) {
      console.log('统一Change', changeParams, triggerAndData);
    },
    
    // 修改
    editmutn(rowlist) {
      // this.$router.push('/detail/base');
      // console.log(rowlist);
      
    //   this.details = rowlist.row
      this.$refs.Editlease.visible = true;
    },

    handleSetupContract() {
      this.$router.push('/form/base');
    },

    // 列表删除 (赋值)
    handleClickDelete(row: { rowIndex: any }) {
      // console.log(row);
      this.deleteIdx = row.rowIndex;
      this.confirmVisible = true;
    },

   // 列表删除
    onConfirmDelete() {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1);
      this.pagination.total = this.data.length;
      const selectedIdx = this.selectedRowKeys.indexOf(this.deleteIdx);
      if (selectedIdx > -1) {
        this.selectedRowKeys.splice(selectedIdx, 1);
      }
      // console.log(this.$router);
      this.confirmVisible = false;
      this.$message.success('删除成功');
      this.resetIdx();
    },

    onCancel() {
      this.resetIdx();
    },
    resetIdx() {
      this.deleteIdx = -1;
    },
  },
});
</script>

<style lang="less" scoped>
@import '@/style/variables';

.goobsnumber {
    color: rgb(224, 255, 249) !important;
    background-color: rgb(167, 223, 208) !important;
}
.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.card-container {
  margin-top: 10px;
}

.reset {
    margin-right: 10px;
}

.left-operation-container {
  padding: 0 0 6px 0;
  margin-bottom: 16px;
  
  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: @text-color-secondary;
  }
}

.search-input {
  width: 360px;
}
.addemployees {
    display: flex;
    // margin-left: 93%;
    margin-bottom: 20px;
    .data {
        margin-left: 20px;
        font-weight: 500;
        font-size: 16px;
    }
}
</style>
